<template>
  <div class="headerBar">
    <div class="header-w">
      <div class="container clearfix">
        <div class="bar_header">
          <template v-if="!userinfo">
            <router-link :to="{name:'login',query:{query:$route.fullPath}}">登陆</router-link>
            <router-link :to="{name:'register',query:{query:$route.fullPath}}">注册</router-link>
          </template>
          <template v-else>
            <span class="logined" style="color: goldenrod;font-weight: 900;">{{userTel}}</span>
            <span class="logout" @click="logout">退出</span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "HeaderBar",
    computed:{
      userinfo(){
        return this.$store.state.userinfo;
      },
      userTel(){
          if(this.$store.state.userinfo){
            return this.$store.state.userinfo.name || this.$store.state.userinfo.tel;
          }
          return "";
      }
    },
    data() {
      return {
      }
    },

    methods: {
      async logout() {
        await this.$api.logout({});
        this.$store.commit("setUserInfo",""); // 清除用户信息
        if(this.$route.meta && this.$route.meta.requireAuth){
          // 当前页面需要登录才能访问,则跳转到登录。。。如果当前页面不需要登录，则不需要跳转
           this.$router.push({ name: 'login', query: { query: this.$route.query.query || '' } });
        }
      }
    },
    mounted() {
    console.log(this.$route)
    }
  };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="scss">
  .headerBar {
    height: 64px;
    .header-w {
      height: 50px;
      background: #f8f8f8;
      border-bottom: 1px solid #e7e7e7;
      position: fixed;
      right: 0;
      left: 0;
      top: 0;
      z-index: 100;
      box-shadow: 0px -3px 15px 0px rgba(0, 0, 0, 0.1);
      .bar_header {
        float: right;
        margin: 0 15px;
        line-height: 50px;
        box-shadow: 0 1px 6px #eee;
        span{
          padding: 15px;
          line-height: 20px;
          font-size: 18px;
          cursor: pointer;
        }
        span:hover {
          background: rgb(231, 231, 231) !important;
          color: rgb(66, 189, 86);
        }
      }

    
    }
  }
</style>